
<!--ul class="breadcrumb" style="width: 1070px;position:fixed;z-index: 100;">
    <li>
        <a href="#">UserHome</a> <span class="divider">/</span>
    </li>
    <li>
        <a href="/u/<%=user.mail%>?page=home-involve&active=nav-list-2">InvolvedProject</a> <span class="divider">/</span>
    </li>
    <li class="active"></li>
</ul-->
<div class="breadcrumb" style="height:30px;width: 780px;position:fixed;z-index: 100;">
    <span class="add-on remove-input curse_pointer" ><i class="icon-refresh" style="margin-top: -2px"></i></span>
    <p class="help-inline"><strong>Operation Score:</strong>123123</p>
    <p class="help-inline"><strong>Rank:</strong>78.2%</p>
</div>
<!--div style="height: 35px;position: fixed;margin-top:36px;z-index: 100">
    <div class="form-search input-append" style="z-index:10;padding-top:5px; background-color:#ffffff">
        <input type="text" class="span2 input-typeahead" style="width: 150px" data-provide="typeahead" data-items="10" autocomplete="off">
        <span class="add-on remove-input curse_pointer" ><i class="icon-remove"></i></span>
        <span class="add-on search-input curse_pointer" ><i class="icon-search"></i>Search</span>
    </div>
</div>
<div class="row" style="width: 1120px;margin-top: 80px"-->

<div class="blank" style="width: 1070px;position:fixed;height: 15px;margin-top:36px;background-color: white;z-index: 100;"></div>
<div class="row" style="width: 1120px;margin-top: 50px">
    <!--div class="row" style="width: 1120px;"-->
    <div class="span3" style="width: 270px">
        <div style="height: 35px;position: fixed;z-index: 100">
            <div class="form-search input-append" style="z-index:10;">
                <input type="text" class="span2 input-typeahead" style="width: 150px" data-provide="typeahead" data-items="10" autocomplete="off">
                <span class="add-on remove-input curse_pointer" ><i class="icon-remove"></i></span>
                <span class="add-on search-input curse_pointer" ><i class="icon-search"></i>Search</span>
            </div>
        </div>
        <div class="nav-classdiagram" style="width:258px;margin-top: 35px; border:2px solid rgb(215, 215, 215);-webkit-border-radius:4px;padding-right:0px">
            <%- partial('icd-nav-classdiagram') %>
        </div>
        <!--div class="nav-classdiagram" style="width:258px;"  >
            <%- partial('icd-nav-classdiagram') %>
        </div-->
    </div>
    <div class="span6-compact" style="width: 530px">
        <div class="span6-compact content-detail" style="position:fixed;width: 530px;overflow: auto;border:2px solid #d7d7d7; -webkit-border-radius: 4px; margin: 0px -20px -0px -5px;">
            <!--%- partial('icd-content-classdiagram') %-->
            <!--%- partial('icd-content-class') %-->
            <!--%- partial('icd-content-relation') %-->
        </div>
    </div>
    <!--div class="span3-compact" style="width: 270px">
        <div id="recommend" class="span3-compact" style="position:fixed;overflow: auto;width: 270px; border:2px solid #d7d7d7; -webkit-border-radius: 4px; margin: 0px -20px 0px 2px;">
            <%- partial('icd-recommend') %>
        </div>
    </div-->
</div>

<!--other part-->
<%- partial('icd-modal') %>


<script src="/javascripts/user-involve.js"></script>
<script src="/javascripts/user-involve-function.js"></script>
<script src="/javascripts/user-involve-recommend.js"></script>
<script src="/javascripts/ajax-function.js"></script>
<script src="/javascripts/typeahead-function.js"></script>
<script src="/javascripts/input-check-function.js"></script>
<!--script src="/javascripts/cd-function.js"></script-->
<script src="/javascripts/html-get.js"></script>
<script>
    window.onload = function(){
        //中部区域的高度设定
        //zoomWindow();
        var maxheightMiddle = $(window).height()-$(".navbar").height()- $(".breadcrumb").outerHeight()-58;
        $(".span6-compact").css("max-height",maxheightMiddle+'px');
        $(".span3-compact").css("max-height",maxheightMiddle+'px');

        var heightMiddle = maxheightMiddle;
        var min_heightMiddle = heightMiddle - $(".search-input").outerHeight()-5;
        $(".span6-compact").css("height",heightMiddle+'px');
        $(".span3-compact").css("height",heightMiddle+'px');
        $(".nav-classdiagram").css("min-height",min_heightMiddle+'px');

        //简化版
        //$(".navbar-fixed-top .container").css("width","800px");
        //$("#container").css("width","800px");
        $(".container").css("width","800px");
        $("ul.breadcrumb").css("width","780px");

        $.ajax({
            url: '/post/data/icd',
            type: 'post',
            data: {
                id:"<%=ccd._id%>",
                user:"<%=user.mail%>"
            },
            dataType: 'json',
            async: true,
            success: function(doc){
                icd_nav_classdiagram_show(doc.icd);
                operationValue();
            }
        });
        $.ajax({
            url: '/post/data/ccd',
            type: 'post',
            data: {id:"<%=ccd._id%>"},
            dataType: 'json',
            async: true,
            success: function(doc){
                ccd = doc.ccd;
            }
        });
    };

    window.onresize = function(){
        //中部区域的高度设定
        //zoomWindow();
        var maxheightMiddle = $(window).height()-$(".navbar").height()- $(".breadcrumb").outerHeight()-58;
        $(".span6-compact").css("max-height",maxheightMiddle+'px');
        $(".span3-compact").css("max-height",maxheightMiddle+'px');

        var heightMiddle = maxheightMiddle;
        var min_heightMiddle = heightMiddle - $(".search-input").outerHeight()-5;
        $(".span6-compact").css("height",heightMiddle+'px');
        $(".span3-compact").css("height",heightMiddle+'px');
        $(".nav-classdiagram").css("min-height",min_heightMiddle+'px');
    };

    $(function(){
        //search顶部固定
        /*
         var navH = $(".form-search").offset().top;
         $(window).scroll(function(){
         var scroH = $(this).scrollTop()+40;

         if(scroH>=navH){
         $(".form-search").css({"position":"fixed","top":40});
         }else if(scroH<navH){
         $(".form-search").css({"position":"static"});
         }
         });
         */
        //自动填充
        $('.input-typeahead').typeahead({
            //左上角search的填充
            source:function(query, process){
                process(source_nav);
            },
            menu: '<ul style="min-width:163px" class="typeahead dropdown-menu"></ul>',
            item: '<li style="min-width:163px"><a href="#"></a></li>'
        });

        //search中的创建cd
        $('#create-class-modal').live("click",function(){
            $('#modal-create-class').children(".modal-body").children("input[type='text']").val(item_val);
            $('#modal-create-class').modal('show');
        });

        //search中的创建relation
        $('#create-relation-modal').live("click",function(){
            var relationname = item_val.split("-");
            $('#modal-create-relation').children(".modal-body").find("input[type=text]").eq(0).val(relationname[0]);
            $('#modal-create-relation').children(".modal-body").find("input[type=text]").eq(1).val(relationname[1]);
            $('#modal-create-relation').modal('show');
        });
        //search中清空
        $('.remove-input').live("click",function(){
            $(this).parent().children("input[type='text']").val('');
        });
        //search中搜索
        var item_val;
        $('.search-input').live("click",function(){
            item_val = $(this).parent().children("input[type='text']").val();
            var list = $(this).parent().parent().parent().children(".nav-classdiagram").children("ul").children("li");
            if(checkInIcd(list,item_val) === false) $('#modal-create').modal('show');
        });

        $('#modal-create').on('show', function () {
            var cd_name = $(".cd").text();
            //为什么不能用name?
            $("#modal-create").children(".modal-header").children("h5").text("Class "+cd_name+" haven't involved"+item_val);
            $("#modal-create").children(".modal-body").children("h3").text("Create "+item_val+"?");
        });

        $(".breadcrumb .icon-refresh").live("click",function(){
            operationValue();
        })

    });
</script>